<template>
  <h1>实时数据</h1>
  <div>
    <tr>
      <td>更新时间：</td>
      <td>{{deviceDetailInfo.updateTime}}</td>
    </tr>
  </div>
  <div>
    <tr>
      <td>
        <!--  温度-->
        <div id="myTemChart" :style="{ width: '480px', height: '360px' }"></div>
      </td>
      <td>
        <!--  湿度-->
        <div id="myHumChart" :style="{ width: '480px', height: '360px' }"></div>
      </td>
      <td>
        <!--  光照强度-->
        <div id="myAdcxChart" :style="{ width: '480px', height: '360px' }"></div>
      </td>
    </tr>
    <tr>
      <td>
          <span v-if="beepCheck">蜂鸣器状态：ON</span>
          <span v-else>蜂鸣器状态：OFF</span>
          <br/>
          <a-switch v-model:checked="beepCheck" :disabled="true"/>
      </td>
      <td>
        <span v-if="ledCheck">LED状态：ON</span>
        <span v-else>LED状态：OFF</span>
        <br/>
        <a-switch v-model:checked="ledCheck" :disabled="true"/>
      </td>
      <td>
        <span>正在追踪</span>
        <div id="updateStateChart" :style="{ width: '200px', height: '150px' }"></div>
      </td>
    </tr>
  </div>

</template>

<script setup>
  import { onMounted, ref, reactive,onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  import { getDetailInfoByCode } from '@/api/runTimeData'

  const deviceCode = 'ID20221111'

  //定义option
  let temOption
  let humOption
  let adcxOption

  //定义init返回值
  let myTemChart
  let myHumChart
  let myAdcxChart

  //蜂鸣器和LED状态
  const beepCheck = ref(false)
  const ledCheck = ref(false)

  const deviceDetailInfo = reactive({
    beepState: 0,
    createTime: '',
    curAdcx: '',
    curHum: '',
    curTem: '',
    deviceCode: '',
    id: 1,
    isDelete: 0,
    ledState: 0,
    updateTime: ''
  })

  const getDetailInfo = () => {
    const res = getDetailInfoByCode(deviceCode)
    res.then(res => {
      let temp = res.data.data
      let split = temp.updateTime.split('T')

      deviceDetailInfo.deviceCode = temp.deviceCode
      deviceDetailInfo.ledState = temp.ledState
      deviceDetailInfo.beepState = temp.beepState
      deviceDetailInfo.createTime = temp.createTime
      deviceDetailInfo.curHum = temp.curHum
      deviceDetailInfo.curTem = temp.curTem
      deviceDetailInfo.updateTime = split[0] + ' ' + split[1]
      deviceDetailInfo.curAdcx = temp.curAdcx
    })
  }

  let timer

  //定时任务
  const runTimeJob = () => {
    timer=setInterval(function () {
      getDetailInfo()
      beepCheck.value = (deviceDetailInfo.beepState === 1)
      ledCheck.value = (deviceDetailInfo.ledState === 1)
      myAdcxChart.setOption({
        series: [
          {
            data: [
              {
                value: Number(deviceDetailInfo.curAdcx),
                name: '光照强度'
              }
            ]
          }
        ]
      })
      myTemChart.setOption({
        series: [
          {
            data: [
              {
                value: Number(deviceDetailInfo.curTem),
                name: '温度'
              }
            ]
          }
        ]
      })
      myHumChart.setOption({
        series: [
          {
            data: [
              {
                value: Number(deviceDetailInfo.curHum),
                name: '湿度'
              }
            ]
          }
        ]
      })
    }, 500)
  }

  onMounted(() => {
    getDetailInfo()
    drawTemLine()
    drawHumLine()
    drawAdcxLine()
    drawUpdateStateLine()
    runTimeJob()
  })

  onUnmounted(()=>{
    clearInterval(timer)
  })

  function drawTemLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('myTemChart')
    myTemChart = echarts.init(chartDom)

    temOption = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 200,
          endAngle: -20,
          min: -20,
          max: 100,
          splitNumber: 12,
          itemStyle: {
            color: '#FFAB91'
          },
          progress: {
            show: true,
            width: 30
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            distance: -45,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -52,
            length: 14,
            lineStyle: {
              width: 3,
              color: '#999'
            }
          },
          axisLabel: {
            distance: -20,
            color: '#999',
            fontSize: 20
          },
          anchor: {
            show: false
          },
          title: {
            show: true
          },
          detail: {
            valueAnimation: true,
            width: '60%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '-15%'],
            fontSize: 40,
            fontWeight: 'bolder',
            formatter: '{value} °C',
            color: 'auto'
          },
          data: [
            {
              value: Number(deviceDetailInfo.curTem),
              name: '温度'
            }
          ]
        },
      ]
    }

    // 绘制图表
    myTemChart.setOption(temOption)
  }

  function drawHumLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('myHumChart')
    myHumChart = echarts.init(chartDom)

    humOption = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 100,
          splitNumber: 10,
          itemStyle: {
            color: '#FFAB91'
          },
          progress: {
            show: true,
            width: 30
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            distance: -45,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -52,
            length: 14,
            lineStyle: {
              width: 3,
              color: '#999'
            }
          },
          axisLabel: {
            distance: -20,
            color: '#999',
            fontSize: 20
          },
          anchor: {
            show: false
          },
          title: {
            show: true
          },
          detail: {
            valueAnimation: true,
            width: '60%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '-15%'],
            fontSize: 40,
            fontWeight: 'bolder',
            formatter: '{value} %',
            color: 'auto'
          },
          data: [
            {
              value: Number(deviceDetailInfo.curHum),
              name: '湿度'
            }
          ]
        },

      ]
    }

    // 绘制图表
    myHumChart.setOption(humOption)
  }

  function drawAdcxLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('myAdcxChart')
    myAdcxChart = echarts.init(chartDom)

    adcxOption = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 100,
          splitNumber: 10,
          itemStyle: {
            color: '#FFAB91'
          },
          progress: {
            show: true,
            width: 30
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            distance: -45,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -52,
            length: 14,
            lineStyle: {
              width: 3,
              color: '#999'
            }
          },
          axisLabel: {
            distance: -20,
            color: '#999',
            fontSize: 20
          },
          anchor: {
            show: false
          },
          title: {
            show: true
          },
          detail: {
            valueAnimation: true,
            width: '60%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '-15%'],
            fontSize: 40,
            fontWeight: 'bolder',
            formatter: '{value} %',
            color: 'auto'
          },
          data: [
            {
              value: Number(deviceDetailInfo.curAdcx),
              name: '光照强度'
            }
          ]
        },

      ]
    }
    // 绘制图表
    myAdcxChart.setOption(adcxOption)
  }

  function drawUpdateStateLine () {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('updateStateChart')
    let updateState = echarts.init(chartDom)

    let option = {
      graphic: {
        elements: [
          {
            type: 'group',
            left: 'center',
            top: 'center',
            children: new Array(7).fill(0).map((val, i) => ({
              type: 'rect',
              x: i * 20,
              shape: {
                x: 0,
                y: -40,
                width: 10,
                height: 80
              },
              style: {
                fill: '#5470c6'
              },
              keyframeAnimation: {
                duration: 1000,
                delay: i * 200,
                loop: true,
                keyframes: [
                  {
                    percent: 0.5,
                    scaleY: 0.3,
                    easing: 'cubicIn'
                  },
                  {
                    percent: 1,
                    scaleY: 1,
                    easing: 'cubicOut'
                  }
                ]
              }
            }))
          }
        ]
      }
    }
    // 绘制图表
    updateState.setOption(option)
  }

</script>

<style scoped>

</style>
